<template>
  <page-wrap back hide-tab title="我的道具" stayStill needLogin>
    <div class="props">
      <view class="section">
        <view class="section-header">
          <!-- <view class="section-enter" @click="toRecords">
            购买记录
          </view> -->
        </view>
        <view class="section-content">
          <view class="props-list">
            <view class="props-item"
              :class="'bg-' + index"
              v-for="(item, index) in rightsList"
              :key="item.rightsSign"
              @click="onRightsClick(item)">
              <view class="props-item-left">
                <text class="icon"  :class="'icon-' + item.rightsSign"></text>
                <view>
                  <text class="props-title">{{item.rightsName}}</text>
                  <text class="props-label">{{item.remark}}</text>
                </view>
              </view>
              <view class="props-item-right">
                x{{item.lastNum}}
              </view>
            </view>
            <Empty
              v-if="loaded && !rightsList.length"
              textColor="#333333"
              text="暂无数据"
              fontSize="28"
              :fontWeight="400"
            />
          </view>
        </view>
      </view>
    </div>
  </page-wrap>
</template>

<script>
import {  getCompanyPersonAllRights, } from "@/api/modules/company";

import Empty from "@/components/Empty.vue";
import ShareMixin from '@/mixins/share';
import LoginMixin from '@/mixins/login.js';
import {
  isCompanyPersonOld,
  isCompanyPerson,
} from "@/api/index";
import { extractParams } from '@/utils/handle.js';

export default {
  mixins: [ShareMixin, LoginMixin],
  components: {
    Empty,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      isCompany: false,
      navHeight: getApp().globalData.navHeight + uni.upx2px(114),
      showJobPostCard: false,
      showJobTopCard: false,
      showResumeViewPurchaseCard: false,
      showConnectPurchaseCard: false,
      showChatPurchaseCard: false,
      connectType: 'general',
      rightsList: [],
      remarkMap: {
        'zp_card': '多种职位任性发布',
        'topping_zp_card': '找人才要抢占机会',
        'check_resume_card': '海量简历随心查看',
        'person_contact_card': '海量人才随心联系',
        'common_contact_card': '心仪人才想聊就聊',
        'high_contact_card': '海量人才随心联系',
        'chat_card': '海量人才随心联系',
      },
      loaded: false,
      rightsSign: '',
      externalPersonId: '',
      sharePath: '/pagesSub/companyCenter/props/index',
      shareTitle: '我的道具 - ' + this.$selfName,
    }
  },
  onLoad(opt) {
    if(opt.scene) {
      const scene = decodeURIComponent(opt.scene);
      const params = extractParams(scene);
      this.externalPersonId = params['p'] || '';
      this.rightsSign = params['r'] || '';
      if (this.rightsSign) {
        this.rightsSign += '_card';
      }
    }
    if (this.personId && this.externalPersonId && this.externalPersonId != this.personId) {
      uni.showModal({
        title: '温馨提示',
        content: '当前登录账号不一致，是否重新登录？',
        success: (res) => {
          if (res.confirm) {
            this.handleLoginPage();
          }
        }
      });
    }
    if (!this.companyId) {
      uni.showLoading();
      this.getCompanyPersonInfo().then((res) => {
        this.getRightsList();
        uni.hideLoading();
      });
    } else {
      this.getRightsList();
    }
  },
  methods: {
    getRightsList() {
      const params = {
        personId:  this.personId,
        companyId: this.companyId,
        // personId:  '7846747',
        // companyId: 'cm1310634961214',
        rightsType: 'vas'
      };
      getCompanyPersonAllRights(params).then(res => {
        if(res && res.code == 200) {
          if(res.data) {
            this.rightsList = res.data.map(item => {
              item.remark = this.remarkMap[item.rightsSign];
              return item;
            });

            if (this.externalPersonId == this.personId && this.rightsSign) {
              this.onRightsClick({rightsSign: this.rightsSign});
            }
          }
        }
      }).finally(() => {
        this.loaded = true;
      });
    },
    onRightsClick(item) {
      const type = item.rightsSign;
      switch(type){
        case 'zp_card':
        case 'social_zp':
          this.showJobPostCard = true;
          break;
        case 'topping_zp_card':
        case 'topping_zp':
          this.showJobTopCard = true;
          break;
        case 'check_resume_card':
          this.showResumeViewPurchaseCard = true;
          break;
        case 'person_contact_card': // 人才联系卡，原有普通联系卡和高级普通联系卡废弃
          this.showConnectPurchaseCard = true;
        case 'common_contact_card':
          this.connectType = 'general';
          this.showConnectPurchaseCard = true;
          break;
        case 'high_contact_card':
          this.connectType = 'vip';
          this.showConnectPurchaseCard = true;
          break;
        case 'chat_card':
          this.showChatPurchaseCard = true;
          break;
      }
    },

    onJobPostCardClose() {
      this.showJobPostCard = false;
    },
    onJobTopCardClose() {
      this.showJobTopCard = false;
    },
    onResumeViewPurchaseCardClose() {
      this.showResumeViewPurchaseCard = false;
    },
    onConnectPurchaseCardClose() {
      this.showConnectPurchaseCard = false;
    },
    onChatPurchaseCardClose() {
      this.showChatPurchaseCard = false;
    },

    toRecords() {
      uni.navigateTo({
        url: '/pagesSub/companyCenter/props/records'
      });
    },

    handleResumeViewSuccess() {
      this.onResumeViewPurchaseCardClose();
      this.getRightsList();
    },
    
    handleConnectSuccess() {
      this.onConnectPurchaseCardClose();
      this.getRightsList();
    },

    handleChatSuccess() {
      this.onChatPurchaseCardClose();
      this.getRightsList();
    },
    // 获取企业id
    getCompanyPersonInfo() {
      let params = {
        person_id: this.personId,
      };
      return isCompanyPerson(params).then((res) => {
        if (res && res.code == 200) {
          this.companyId = res.info.company_id;
          uni.setStorageSync("company-id", this.companyId);
        } else {
          params = {
            personId: this.personId,
          };
          isCompanyPersonOld(params).then((oldRes) => {
            if (oldRes && oldRes.code == 200) {
              this.companyId = oldRes.company_id;
              uni.setStorageSync("company-id", this.companyId);
            }
          });
        }
      });
    },
  }
}
</script>

<style lang="scss">
@include img-base-self(".rights-top", "rights/bg.png");

</style>
<style lang="scss" scoped>
$img-base-rights: $img-base + "rights/";
.props {
  .section {
    padding: $uni-spacing-col-big;
    &-header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: $uni-spacing-col-big;
    }
    &-enter {
      color: $u-type-primary;
    }
  }
  .props-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: $uni-spacing-col-big;
    padding: $uni-spacing-col-big $uni-spacing-col-lg;
    background-size: 100% 100%;
    background-image: url($img-base-rights + 'p_bg_3.png');
    &.bg-0, &.bg-2 {
      color: #274a5f;
      background-image: url($img-base-rights + 'p_bg_3.png');
    }
    &.bg-1, &.bg-5 {
      background-image: url($img-base-rights + 'p_bg_4.png');
    }
    &.bg-3 {
      background-image: url($img-base-rights + 'p_bg_1.png');
    }
    &.bg-4 {
      background-image: url($img-base-rights + 'p_bg_2.png');
    }

    &.bg-1 {
      color: #3e345a;
    }

    &.bg-3 {
      color: #274a5f;
    }
    &.bg-4 {
      color: #274a5f;
    }
    &.bg-5 {
      color: #274a5f;
    }

    &-left {
      display: flex;
      align-items: center;
    }

    .props-title {
      display: block;
      margin-bottom: 8rpx;
      font-size: 40rpx;
      font-weight: bold;
    }

    .icon {
      flex-shrink: 0;
      width: 102rpx;
      height: 102rpx;
      margin-right: 25rpx;
      background-size: 100% 100%;
      vertical-align: top;
      margin-top: -4rpx;
      &-zp_card {
        background-image: url($img-base-rights + 'p_jog_post.png');
      }
      &-topping_zp_card {
        background-image: url($img-base-rights + 'p_job_top.png');
      }
      &-check_resume_card {
        background-image: url($img-base-rights + 'p_resume.png');
      }
      &-common_contact_card {
        background-image: url($img-base-rights + 'p_connect.png');
      }
      &-person_contact_card {
        background-image: url($img-base-rights + 'p_connect.png');
      }
      &-high_contact_card {
        background-image: url($img-base-rights + 'p_connect_v.png');
      }
      &-chat_card {
        background-image: url($img-base-rights + 'p_chat.png');
      }
    }

    &-right {
      align-self: center;
      font-size: 60rpx;
    }
  }
}
</style>